<template>
  <div class="container-creategroup">
      <headersubaction
      :name='"创建群聊"'
      :action='"groupHead"'
      :disablebtn='disablebtn'
      @confirmFun='confirmFu'></headersubaction>
      <div class="mui-scroll-wrapper mui-content">
        <div class="mui-scroll">
          <div class='select-header'>
            <span
            class="iconSearch mui-icon mui-icon-search"
            ></span>
            <input ref="searchfriend"
            type="text"
            v-model="value"
            :placeholder='`${placeholder}`'
            class="searchtext"
            @focus="searchFocus"
            @blur="searchBlur"
            autocomplete="off">
          </div>
          <connectselectuser
          :warningTip='warningTip'
          @tellSelectArrZi='tellSelectArrFu'
          :emptyFlag='emptyFlag'
          ></connectselectuser>
        </div>
      </div>
      <div class="group-info" v-show='showGroupFlag'>
        <form class="mui-input-group input-group">
           <!-- <div class="goback">
            <span class="mui-pull-left mui-icon mui-icon-left-nav"></span>
          </div> -->
          <div class="mui-input-row">
              <label>群名</label>
              <input type="text" v-model='groupName' class="mui-input-clear" placeholder="请输入群名">
          </div>
          <div class="mui-input-row">
              <label>群描述</label>
              <textarea type="text" class="mui-input-clear" placeholder="请输入群描述" v-model='info'>
              </textarea>
          </div>
          <div class="mui-button-row">
            <button type="button" class="mui-btn mui-btn-danger" >取消</button>
            <button type="button" class="mui-btn mui-btn-success" >确认</button>
          </div>
        </form>
      </div>
  </div>
</template>
<script>
// 带input选择的组件
import ConnectSelectUser from './ConnectSelectUser'
// 头部动作组件
import headersubaction from '../public/header/HeaderSubAction'
import {mapState, mapActions} from 'vuex'
  export default {
    data() {
      return {
        name1: this.$route.query.name,
        action: this.$route.query.action,
        placeholder: '搜索',
        value: '',
        // 当前选择到朋友，打算创建群聊的 后面再做选中的朋友的头像插到这里去******
        selectArr: [],
        // 群描述
        info: '',
        // 群名
        groupName: '',
        // 警告提示
        warningTip: '您还没有好友，不能创建群组',
        showGroupFlag: false,
        // 清空选中数组标志 false：不清空 true：清空
        emptyFlag: false
      }
    },
    created() {
    },
    computed: {
      ...mapState(['friends']),
      disablebtn() {
        let obj = {flag: false, num: 0}
        // 一开始设置不能点击，当后面有选择东西的时候，再进行点击，后面父组件向子组件传值
        if (this.selectArr.length > 0) {
          obj.flag = true
          obj.num = this.selectArr.length
          return obj
        }
        return obj
      }
    },
    watch: {
    },
    components: {
      headersubaction,
      connectselectuser: ConnectSelectUser
    },
    mounted() {
      this.init()
    },
    methods: {
      ...mapActions(['addGroupInfo']),
      init() {
        let self = this
        self.$immui.init()
        self.$immui('.mui-input-group').on('tap', 'button', function() {
          console.log(this.innerText, 'pppp')
          self.emptyFlag = true
          self.showGroupFlag = false
          setTimeout(() => {
            self.emptyFlag = false
          }, 100)
          if (this.innerText === '取消') {
            self.info = ''
            self.groupName = ''
          } if (this.innerText === '确认') {
            console.log('确认创建群组')
            let options = {
              data: {
                  groupname: self.groupName,
                  desc: self.info,
                  members: self.selectArr,
                  public: true,
                  approval: false,
                  allowinvites: true
              },
              success: function (respData) {
                console.log(respData.data.groupid, typeof respData.data.groupid, 'ppppppppppppppppppp')
                let options = {
                  groupId: respData.data.groupid,
                  success: function(resp) {
                      console.log('Response:,涉及到数据库的结构稍后 ', resp)
                      // 添加群组个数
                      self.addGroupInfo(resp.data[0])
                  },
                  error: function() {
                    console.log('收到群组的邀请信息后获取群组的信息失败')
                  }
                }
              self.$imconn.getGroupInfo(options)
              },
              error: function () {
                console.log('由于不可控制的原因，创建群聊失败')
              }
            }
            self.$imconn.createGroupNew(options)
          }
        })
      },
      searchFocus() {
        console.log('获取到焦点')
      },
      searchBlur() {
        console.log('失去焦点')
      },
      confirmFu() {
        console.log('子组件给父组件传值，可以确定创建群聊了')
        this.showGroupFlag = true
      },
      tellSelectArrFu(arr) {
        this.selectArr = [...arr]
      }
    }
  }
</script>
<style lang='scss' scoped>
.container-creategroup{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background: white;
    .select-header{
      height: 52px;
      position: relative;
      .iconSearch{
        position: absolute;
        left: 13px;
        top: 8px;
      }
      input {
        padding-left: 40px;
      }
    }
    .mui-table-view-cell{
      padding: 0;
    }
    .group-info{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 13;
      background: rgba(148, 147, 147, 0.562);
      .input-group{
        width: 90vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // background: rgb(255, 255, 255);
        .mui-input-row label {
          width: 20%;
          font-size: 14px;
          padding: 10px 4px;
          text-align: center;
          // line-height: 62px;
        }
        .mui-input-row input{
          width: 80%;
        }
        .mui-input-row input::-webkit-input-placeholder{
            font-size: 12px;
        }
        .mui-input-row textarea{
          width: 80%;
          height: 120px;
        }
         .mui-input-row textarea::-webkit-input-placeholder{
          font-size: 12px;
        }
      }
    }
}
.mui-scroll-wrapper{
  top: 44px;
}
.mui-input-group .mui-input-row{
  height: auto;
}
</style>
